<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ElementPlus 表格示例</title>

    <!-- 引入 ElementPlus 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">

    <!-- 引入 Vue 3 -->
    <script src="https://unpkg.com/vue@3"></script>

    <!-- 引入 ElementPlus 组件库 -->
    <script src="https://unpkg.com/element-plus"></script>
</head>

<body>
    <div id="app">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>用户列表</span>
                </div>
            </template>

            <el-table :data="tableData" style="width: 100%" stripe border highlight-current-row
                @current-change="handleCurrentChange">

                <el-table-column prop="name" label="姓名" width="180">
                    <!-- 这里可以添加单元格内容的模板，如果没有特殊需求，可留空 -->
                </el-table-column>

                <el-table-column prop="age" label="年龄" width="180" align="right">
                    <!-- 这里可以添加单元格内容的模板，如果没有特殊需求，可留空 -->
                </el-table-column>

                <el-table-column prop="address" label="地址">
                    <!-- 这里可以添加单元格内容的模板，如果没有特殊需求，可留空 -->
                </el-table-column>

                <el-table-column label="操作" width="120">
                    <template #default="scope">
                        <el-button type="primary" link @click="handleEdit(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>

    <script>
        const { createApp } = Vue

        createApp({
            data() {
                return {
                    tableData: [
                        {
                            name: '张三',
                            age: 25,
                            address: '北京市朝阳区'
                        },
                        {
                            name: '李四',
                            age: 30,
                            address: '上海市浦东新区'
                        },
                        {
                            name: '王五',
                            age: 28,
                            address: '广州市天河区'
                        }
                    ]
                }
            },
            methods: {
                handleCurrentChange(val) {
                    console.log('当前选中行:', val)
                },
                handleEdit(row) {
                    console.log('编辑操作:', row)
                    alert(`正在编辑 ${row.name}`)
                }
            }
        })
            .use(ElementPlus)
            .mount('#app')
    </script>

    <style>
        .box-card {
            max-width: 1000px;
            margin: 20px auto;
        }

        .demo-table .el-table {
            margin-top: 15px;
        }
    </style>
</body>

</html>